<template>
  <li class="dropdown tasks-menu" :class="{open:$store.state.NavBar.dropDownMenu==='task'}">
    <a class="dropdown-toggle" @click.stop.prevent="clickTasks">
      <i class="fa fa-flag-o"></i>
      <span class="label label-danger">{{tasks.length}}</span>
    </a>
    <ul class="dropdown-menu">
      <li class="header">你有{{tasks.length}}个任务未完成</li>
      <li>
        <ul class="menu">
          <Task v-for="task of tasks"
                :key="task.id"
                :title="task.title"
                :progress="task.progress"
                :url="task.url">
          </Task>
        </ul>
      </li>
      <li class="footer">
        <a href="javascript:void(0)">查看所有</a>
      </li>
    </ul>
  </li>
</template>

<script>
  import Task from "./Task.vue"
  import {SET_NAV_DROP_DOWN} from "../../store/mutationTypes"

  let tasks = [
    {id:"1", title:"任务单1", progress:"30", url:"javascript:void(0)"},
    {id:"2", title:"任务单1", progress:"30", url:"javascript:void(0)"},
    {id:"3", title:"任务单1", progress:"30", url:"javascript:void(0)"},
    {id:"4", title:"任务单1", progress:"30", url:"javascript:void(0)"},
    {id:"5", title:"任务单1", progress:"30", url:"javascript:void(0)"},
  ];

  export default {
    name: "Tasks",
    data() {
      return {
        isOpen:false,
        tasks
      }
    },
    methods: {
      clickTasks() {
        this.$store.commit(SET_NAV_DROP_DOWN, this.$store.state.NavBar.dropDownMenu==="task"?"":"task")
      }
    },
    components: {Task}
  }
</script>



// WEBPACK FOOTER //
// Tasks.vue?66e7a506
